<div class="razor-admin-pages" ng-init="loadPages()">
	<div class="row">
		<div class="col-sm-12">
			<div class="accordian" ng-controller="pagesListAccordion">
				<div class="filter row">
					<div class="col-sm-9">
						<div class="input-group">
	  						<span class="input-group-addon">Filter</span>
							<input class="form-control" ng-model="searchFilter" placeholder="Search to filter" />
						</div>
					</div>
					<div class="col-sm-3">
						<div class="input-group">
							<span class="input-group-addon">Limit</span>
							<input class="form-control" ng-model="searchLimit" ng-init="searchLimit = 50" type="number"/>
						</div>
					</div>
				</div>
				<accordion close-others="oneAtATime">
					<accordion-group ng-repeat="page in pages | filter:searchFilter | limitTo:searchLimit" is-open="isopen">
						<accordion-heading>
       						<i class="fa fa-eye-slash" ng-hide="page.active" title="Active"></i>
       						<i class="fa fa-home" ng-show="page.id == site.home_page" title="Home Page (deletion is disabled)"></i>
							<i class="fa fa-pencil" ng-show="isCurrentPage(page.id)" title="Currently Editing (deletion is disabled)"></i>
							{{page.name}}
							<i class="expander pull-right fa" ng-class="{'fa-chevron-down': isopen, 'fa-chevron-right': !isopen}"></i>
						</accordion-heading>
						<div class="content">
					        <div class="btn-toolbar" role="toolbar">
					            <div class="btn-group"> 
					                <button class="btn btn-primary" ng-click="editPage(page.link)"><i class="fa fa-pencil"></i> Edit Page</button>
					            	<button class="btn btn-default" ng-disabled="page.id == site.home_page" ng-click="makeHomePage(page.id)"><i class="fa fa-home"></i> Make Home Page</button>
					            </div>
					            <div class="btn-group pull-right"> 
					                <button class="btn btn-danger" ng-click="pages.splice($index,1); deletePage(page.id)" ng-disabled="isCurrentPage(page.id) || page.id == site.home_page"><i class="fa fa-trash-o"></i> Delete Page</button>
					            </div>
					        </div>
					        <div class="row">
						        <div class="col-xs-6">
						        	<table class="table table-condensed table-bordered table-striped table-data">
						        		<tbody>
						        			<tr><td>ID</td><td>{{page.id}}</td></tr>
						        			<tr>
						        				<td>Active</td>
						        				<td>
						        					<span ng-show="page.active">ON</span>
						        					<span ng-hide="page.active">OFF</span>
						        				</td>
						        			</tr>
						        			<tr><td>Theme</td><td>{{page.theme}}</td></tr>
						        			<tr><td>Name</td><td>{{page.name}}</td></tr>
						        			<tr><td>Title</td><td>{{page.title}}</td></tr>
						        			<tr><td>Link</td><td>{{page.link}}</td></tr>
						        			<tr><td>Keywords</td><td>{{showKeywords(page.keywords)}}</td></tr>
						        			<tr><td>Description</td><td>{{page.description}}</td></tr>
						        		</tbody>
						        	</table>
						        </div>
						        <div class="col-xs-6">
							        <div class="page-preview">
							        	<iframe ng-src="{{loadPreview(page.link)}}" ng-if="isopen"></iframe>
							        	<div class="preview-mask"></div>
							        </div>
						        </div>
					        </div>
						</div>
					</accordion-group>
				</accordion>
			</div>
		</div>
	</div>
</div>